<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter  Sample解析》 - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="早起的年轻人做的网站"><meta property="og:title" content="《Flutter  Sample解析》" />
<meta property="og:description" content="
本文主要介绍简单看了下 Flutter 源码中的例子，flutter_gallery。
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/flutter-sample%E8%A7%A3%E6%9E%90/" />
<meta property="og:image" content="https://luckly.work/logo.png"/>
<meta property="article:published_time" content="2021-07-31T19:08:37+08:00" />
<meta property="article:modified_time" content="2021-07-31T19:08:37+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:title" content="《Flutter  Sample解析》"/>
<meta name="twitter:description" content="
本文主要介绍简单看了下 Flutter 源码中的例子，flutter_gallery。
"/>
<meta name="application-name" content="LoveIt">
<meta name="apple-mobile-web-app-title" content="LoveIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/flutter-sample%E8%A7%A3%E6%9E%90/" /><link rel="prev" href="https://luckly.work/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" /><link rel="next" href="https://luckly.work/dart%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter  Sample解析》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/flutter-sample%E8%A7%A3%E6%9E%90\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "flutter","wordcount":  637 ,
        "url": "https:\/\/luckly.work\/flutter-sample%E8%A7%A3%E6%9E%90\/","datePublished": "2021-07-31T19:08:37+08:00","dateModified": "2021-07-31T19:08:37+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/luckly.work\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "早起的年轻人"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">Lucklyの博客 - 在阅读中遇见自己</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/posts/">所有文章</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/flutter/">Flutter</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/read/">读书笔记</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/go/">Go</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/tags/">标签</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/">分类</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="https://github.com/ITmxs">Github</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/friend/">友链</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter  Sample解析》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>早起的年轻人</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-31">2021-07-31</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 637 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 2 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#sizedbox">SizedBox</a></li>
    <li><a href="#mainaxisalignment-和-crossaxisalignment">mainAxisAlignment 和 crossAxisAlignment</a></li>
    <li><a href="#图标居中的技巧">图标居中的技巧</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍简单看了下 Flutter 源码中的例子，flutter_gallery。</p>
</blockquote>
<p><a href="https://github.com/flutter/flutter/tree/master/examples/flutter_gallery" target="_blank" rel="noopener noreffer">flutter_gallery</a> 是学习 Flutter 的好例子。</p>
<hr>
<h1 id="sizedbox">SizedBox</h1>
<p>例子中多处用到 <a href="https://api.flutter.dev/flutter/widgets/SizedBox-class.html" target="_blank" rel="noopener noreffer">SizedBox</a>。</p>
<blockquote>
<p>A box with a specified size.</p>
</blockquote>
<blockquote>
<p>If given a child, this widget forces its child to have a specific width and/or height (assuming values are permitted by this widget’s parent). If either the width or height is null, this widget will size itself to match the child’s size in that dimension.</p>
</blockquote>
<blockquote>
<p>If not given a child, SizedBox will try to size itself as close to the specified height and width as possible given the parent’s constraints. If height or width is null or unspecified, it will be treated as zero.</p>
</blockquote>
<p>这个控件中如果不指定子控件，则类似于 android 中的 <a href="https://developer.android.com/reference/android/widget/Space" target="_blank" rel="noopener noreffer">android.view.Space</a> 用于占位。</p>
<p>这个控件中如果指定子控件，则强制子控件大小跟当前控件一致。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">SizedBox(
  width: 200.0,
  height: 300.0,
  child: const Card(child: Text(&#39;Hello World!&#39;)),
)
</code></pre></td></tr></table>
</div>
</div><p><a href="https://blog.csdn.net/weixin_33716154/article/details/88017225" target="_blank" rel="noopener noreffer">Flutter之SizedBox学习使用 - weixin_33716154的博客 - CSDN博客</a></p>
<h1 id="mainaxisalignment-和-crossaxisalignment">mainAxisAlignment 和 crossAxisAlignment</h1>
<p>Row 和 Column 控件中经常会看到 <a href="https://flutter.dev/docs/development/ui/layout" target="_blank" rel="noopener noreffer">mainAxisAlignment</a> 和 <code>crossAxisAlignment</code> 两个属性。<code>mainAxisAlignment</code> 是主轴，<code>crossAxisAlignment</code> 是交叉轴。具体来说，</p>
<ul>
<li>对于 Row，<code>mainAxisAlignment</code> 是横轴，<code>crossAxisAlignment</code> 是纵轴</li>
<li>对于 Column，<code>mainAxisAlignment</code> 是纵轴，<code>crossAxisAlignment</code> 是横轴</li>
</ul>
<blockquote>
<p>You control how a row or column aligns its children using the mainAxisAlignment and crossAxisAlignment properties. For a row, the main axis runs horizontally and the cross axis runs vertically. For a column, the main axis runs vertically and the cross axis runs horizontally.</p>
</blockquote>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/row-diagram.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/row-diagram.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/row-diagram.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/row-diagram.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/row-diagram.png"
        title="img" /></p>
<ul>
<li><a href="https://blog.csdn.net/yuzhiqiang_1993/article/details/86496145" target="_blank" rel="noopener noreffer">Flutter中MainAxisAlignment和CrossAxisAlignment详解 - 喻志强的博客 - CSDN博客</a></li>
<li><a href="https://blog.csdn.net/hekaiyou/article/details/70849178" target="_blank" rel="noopener noreffer">Flutter进阶—垂直和水平布局 - 咖啡花园 - CSDN博客</a></li>
<li><a href="https://stackoverflow.com/questions/53850149/flutter-crossaxisalignment-vs-mainaxisalignment" target="_blank" rel="noopener noreffer">Flutter crossAxisAlignment vs mainAxisAlignment - Stack Overflow</a></li>
</ul>
<h1 id="图标居中的技巧">图标居中的技巧</h1>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Container(
  width: 56.0,
  height: 56.0,
  alignment: Alignment.center,
  child: Icon(
    demo.icon,
    size: 24.0,
    color: isDark ? Colors.white : _kFlutterBlue,
  ),
),
</code></pre></td></tr></table>
</div>
</div></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-31</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://luckly.work/flutter-sample%E8%A7%A3%E6%9E%90/" data-title="《Flutter  Sample解析》" data-hashtags="flutter"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://luckly.work/flutter-sample%E8%A7%A3%E6%9E%90/" data-hashtag="flutter"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://luckly.work/flutter-sample%E8%A7%A3%E6%9E%90/" data-title="《Flutter  Sample解析》"><i class="fab fa-hacker-news fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://luckly.work/flutter-sample%E8%A7%A3%E6%9E%90/" data-title="《Flutter  Sample解析》"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://luckly.work/flutter-sample%E8%A7%A3%E6%9E%90/" data-title="《Flutter  Sample解析》" data-image="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" class="prev" rel="prev" title="《Flutter UI问题分析小结》"><i class="fas fa-angle-left fa-fw"></i>《Flutter UI问题分析小结》</a>
            <a href="/dart%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/" class="next" rel="next" title="《Dart入门笔记》">《Dart入门笔记》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">早起的年轻人</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"cookieconsent":{"content":{"dismiss":"同意","link":"了解更多","message":"本网站使用 Cookies 来改善您的浏览体验."},"enable":true,"palette":{"button":{"background":"#f0f0f0"},"popup":{"background":"#1aa3ff"}},"theme":"edgeless"},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.zh-cn","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
